<template>
  <div class="app-container c-dis-flex-col c-hidden c-question-edit-from-wrap">
    <div class="c-width c-flex c-dis-flex-col c-scroll-y">
      <div class="c-width c-flex c-dis-flex-row">
        <div class="c-flex c-dis-flex-col c-hidden c-question-edit-from">
          <div class="com-edit-title"><span></span>题目编辑区域</div>
          <el-form :model="form" ref="form" label-width="100px" v-loading="formLoading"  :rules="rules">
            <el-form-item label="题库分类：" prop="gradeLevel" required>
              <treeselect
                no-options-text="无"
                v-model="form.gradeLevel"
                :options="categoryOptions"
                :show-count="true"
                placeholder="请选择题库分类"
              />
            </el-form-item>
            <el-form-item label="知识点标签" prop="subjectId" required>
              <treeselect  no-options-text="无" v-model="form.subjectId" :options="labelOptions" :show-count="true" placeholder="请选择知识点标签" />
            </el-form-item>
            <el-form-item label="题干：" prop="title" required>
              <el-input v-model="form.title" placeholder="请输入内容">
<!--                <i class="el-icon-edit el-input__icon" slot="suffix" @click="inputClick(form, 'title')"></i>-->
              </el-input>
            </el-form-item>
            <el-form-item
              label="选项："
              required
              class="question-item-flex-start"
            >
              <el-form-item
                :label="item.prefix"
                :key="item.prefix"
                v-for="(item, index) in form.items"
                label-width="50px"
                class="question-item-label"
              >
                <el-input
                  v-model="item.prefix"
                  type="input"
                  style="width: 100px; margin-right: 10px"
                />
                <el-input
                  v-model="item.content"
                  class="question-item-content-input"
                  placeholder="请输入内容"
                >
<!--                  <i class="el-icon-edit el-input__icon" slot="suffix" @click="inputClick(item, 'content')"></i>-->
                </el-input>

                <el-button
                  type="primary"
                  size="small"
                  class="question-item-remove"
                  icon="el-icon-delete"
                  @click="questionItemRemove(index)"
                ></el-button>
              </el-form-item>
            </el-form-item>
            <el-form-item label="标答：" prop="correct" required>
              <el-radio-group v-model="form.correct">
                <el-radio
                  v-for="item in form.items"
                  :key="item.prefix"
                  :label="item.prefix"
                  >{{ item.prefix }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
            <el-form-item label="解析：" prop="analyze" required>
              <el-input v-model="form.analyze" placeholder="请输入解析内容">
<!--                <i class="el-icon-edit el-input__icon" slot="suffix" @click="inputClick(form, 'analyze')"></i>-->
              </el-input>
            </el-form-item>
            <el-form-item label="分数：" prop="score" required>
              <el-input-number
                v-model="form.score"
                :step="1"
                :min="1"
                :max="1"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="难度：" required>
              <el-rate
                v-model="form.difficult"
                show-text
                :max="3"
                :texts="['简单', '较难', '困难']"
                class="question-item-rate"
              ></el-rate>
            </el-form-item>
          </el-form>
        </div>
        <div class="c-dis-flex-col c-hidden question_preview_wrap">
          <div class="com-edit-title"><span></span>题目预览</div>
          <QuestionShow  :question="form" :qType="form.questionType"/>
        </div>
      </div>
    </div>
    <div class="c-question-edit-from-submit">
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button type="info" @click="resetForm">重置</el-button>
    </div>

    <el-dialog title="编辑" :visible.sync="richEditor.dialogVisible"  append-to-body :close-on-click-modal="false" style="width: 100%;height: 100%"   :show-close="false" center>
      <Ueditor @ready="editorReady"/>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editorConfirm">确 定</el-button>
        <el-button @click="richEditor.dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import QuestionShow from '../components/Show'
import Ueditor from '@/components/Ueditor'
import { QueEdit,QueSelect } from "@/api/question";
import {categoryTreeSelect} from "@/api/questionbank/category";
import {knownLedgeLabelTreeSelect} from "@/api/questionbank/knowledgeLabel";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components: {
    Ueditor,
    QuestionShow,
    Treeselect
  },
  data () {
    return {
      form: {
        id: null,
        questionType: 3,
        gradeLevel: null,
        subjectId: null,
        title: '',
        items: [
          { id: null, prefix: 'A', content: '是' },
          { id: null, prefix: 'B', content: '否' }
        ],
        analyze: '',
        correct: '',
        score: '',
        difficult: 0
      },
      // 题库分类选项
      categoryOptions: undefined,
      // 知识点标签选项
      labelOptions: undefined,
      formLoading: false,
      rules: {
        gradeLevel: [
          { required: true, message: "请选择题库分类", trigger: "change" },
        ],
        subjectId: [
          { required: true, message: "请选择知识点", trigger: "change" },
        ],
        title: [
          { required: true, message: '请输入题干', trigger: 'blur' }
        ],
        analyze: [
          { required: true, message: '请输入解析', trigger: 'blur' }
        ],
        score: [
          { required: true, message: '请输入分数', trigger: 'blur' }
        ],
        correct: [
          { required: true, message: '请选择标准答案', trigger: 'change' }
        ]
      },
      richEditor: {
        dialogVisible: false,
        object: null,
        parameterName: '',
        instance: null
      },
      questionShow: {
        qType: 0,
        dialog: false,
        question: null,
        loading: false
      }
    }
  },
  created () {
    let id = this.$route.query.id;
    let _this = this;
    _this.getCategoryTree();
    _this.getKnownledgeLabelTree();
    if (id && parseInt(id) !== 0) {
      _this.formLoading = true;
      QueSelect(id).then((re) => {
        _this.form = re.data;
        _this.formLoading = false;
      });
    }
  },
  methods: {
    editorReady (instance) {
      this.richEditor.instance = instance
      let currentContent = this.richEditor.object[this.richEditor.parameterName]
      this.richEditor.instance.setContent(currentContent)
      // 光标定位到Ueditor
      this.richEditor.instance.focus(true)
    },
    inputClick (object, parameterName) {
      this.richEditor.object = object
      this.richEditor.parameterName = parameterName
      this.richEditor.dialogVisible = true
    },
    editorConfirm () {
      let content = this.richEditor.instance.getContent()
      this.richEditor.object[this.richEditor.parameterName] = content
      this.richEditor.dialogVisible = false
    },
    submitForm () {
      let _this = this
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.formLoading = true
          QueEdit(this.form).then(re => {
            if (re.code === 200) {
              _this.$message.success(re.msg);
              //编辑页面跳转过来，保存后不做表单重置
              if(!_this.form.id){
                _this.resetForm();
              }
              _this.formLoading = false;
            } else {
              _this.$message.error(re.msg);
              this.formLoading = false;
            }
          }).catch(e => {
            this.formLoading = false
          })
        } else {
          return false
        }
      })
    },
    resetForm () {
      let lastId = this.form.id
      this.$refs['form'].resetFields()
      this.form = {
        id: null,
        questionType: 3,
        gradeLevel: null,
        subjectId: null,
        title: '',
        items: [
          { id: null, prefix: 'A', content: '是' },
          { id: null, prefix: 'B', content: '否' }
        ],
        analyze: '',
        correct: '',
        score: '',
        difficult: 0
      }
      this.form.id = lastId
    },
    /** 查询题库分类树结构 */
    getCategoryTree() {
      categoryTreeSelect().then((response) => {
        this.categoryOptions = response.data;
      });
    },
    /** 查询知识库标签树结构 */
    getKnownledgeLabelTree() {
      knownLedgeLabelTreeSelect().then(response => {
        this.labelOptions = response.data;
      });
    },
  },
  computed: {

  }
}
</script>
